<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .r1{
            color: red;
        }
        .r2{
            color: #000;
        }
        body {
            padding-left: 600px;
            padding-top: 100px;
            height: 2000px;
        }
        
        #employeeTable {
            width: 700px;
            text-align: center;
            border-collapse: collapse;
            background: #fff;
        }
        
        #employeeTable td {
            width: 120px;
            height: 30px;
            border: 1px solid #000;
        }
        
        #employeeTable thead {
            background-color: rgb(168, 163, 163);
        }
        /* 设置tbody中每行tr样式 */
        
        #employeeTable tbody tr:nth-child(n) {
            background-color: rgb(25, 230, 52);
        }
        
        #employeeTable tbody tr:nth-child(2n) {
            background-color: rgb(168, 163, 163);
        }
        /* 设置删除线 */
        
        #employeeTable tbody tr td:nth-child(3) {
            text-decoration: line-through;
        }
        
        a {
            color: #000;
            text-decoration: none;
        }
        
        .tab1 tr {
            height: 30px;
        }
    </style>
</head>

<body>
    <table class="tab1">
        <tr>
            <td>商品名称：<input type="text" id="username"> </td>
            <td></td>
        </tr>
        <tr>
            <td>商品类别：<select name="cars" id="password">
                            <option value="优选水果">优选水果</option>
                            <option value="卤味熟食">卤味熟食</option>
                            <option value="饮料酒水">饮料酒水</option>
                            <option value="休闲零食">休闲零食</option>
                            </select></td>
            <td></td>
        </tr>
        <tr>
            <td>商品原价：<input type="text" id="repassword"></td>
            <td></td>
        </tr>
        <tr>
            <td>商品现价：<input type="text" id="tel"></td>
            <td></td>
        </tr>
        <tr>
            <td>商品数量：<input type="text" id="email"></td>
            <td></td>
        </tr>
        <tr>
            <td>
                是否标红：<input type="radio" name="colors" data-id=r1>是
                <input type="radio" name="colors" data-id=r2>否
            </td>
        </tr>
        <tr>
            <td> <input type="submit" value="提交信息" class="aa"> </td>
        </tr>
    </table>

    <table id='employeeTable'>
        <thead>
            <tr>
            <td class="fa">全部</td> 
            <td class="a1">优选水果</td>
            <td class="a2">卤味熟食</td>
            <td class="a3">饮料酒水</td>           
            <td class="a4">休闲零食</td> 
         
            </tr>
            <tr>
                <td>商品名称</td>
                <td>商品类别</td>
                <td>原价</td>
                <td>现价</td>
                <td>库存</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>

</html>
<script>
    /******************************************************************************* */
    // 先获取本地存储购物车的数据
    let localData = localStorage.getItem('dat');
    var dat = jQuery.parseJSON(localData)
    // 判断购物车是否为空
    var tr = ' '
    dat.forEach(item => {
        tr += ` <tr>
     <td class="${item.vall}">${item.name}</td>
     <td>${item.ge}</td>
     <td>￥${item.re}</td>
     <td>${item.te}</td>
     <td>${item.em}</td>
     <td><a href='#'>删除</a></td>
     </tr>
     `
    })
    $('#employeeTable tbody').html(tr);
/******************************************************************************* */
 // 获取要操作的dom元素
 var username = document.querySelector('#username')
 var password = document.querySelector('#password')
 var repassword = document.querySelector('#repassword')
 var tel = document.querySelector('#tel')
 var email = document.querySelector('#email')
 var btn = document.querySelector('.aa')
 /******************************************************************************* */
 setInterval(function(){
        if (username.value != '' && repassword.value != '' && tel.value != '' && email.value != '') {
         btn.disabled = false
     } else {
         btn.disabled = true
     }
},20)
 //设置提交事件
 btn.onclick = function() {
     var vall = $('input:radio[name="colors"]:checked')[0].dataset.id;
/******************************************************************************* */
    // 先获取本地存储购物车的数据
    let localData = localStorage.getItem('dat'); 
    let dat = JSON.parse(localData);
    //将这个商品加入过购物城
        dat.unshift({
            name: username.value,
            ge: password.value,
            re: repassword.value,
            te: tel.value,
            em: email.value,
            vall: vall
        });
        localStorage.setItem('dat', JSON.stringify(dat));
        var tr =' '
        dat.forEach(item => {
          tr+=` <tr>
         <td class="${item.vall}">${item.name}</td>
         <td>${item.ge}</td>
         <td>￥${item.re}</td>
         <td>${item.te}</td>
         <td>${item.em}</td>
         <td><a href='#'>删除</a></td>
         </tr>
         `
        })
        $('#employeeTable tbody').html(tr);
    

        //添加完tr清空表单内容
         username.value = '';
         password.value = '优选水果';
         repassword.value = '';
         tel.value = '';
         email.value = '';
 };
/******************************************************************************* */

/******************************************************************************* */
/******************************************************************************* */
function he(obj,zi ){
        obj.click(function(){
    var dat = JSON.parse(localStorage.getItem('dat'));
    var username=zi
    let dataArr = dat.filter(v=>{
       return(v.ge===username)
     })
     var tr =' '
     dataArr.forEach(item => {
       tr+=` <tr>
    <td class="${item.vall}">${item.name}</td>
      <td>${item.ge}</td>
      <td>￥${item.re}</td>
      <td>${item.te}</td>
      <td>${item.em}</td>
      <td><a href='#'>删除</a></td>
      </tr>
      `
     })
     $('#employeeTable tbody').html(tr);
    
})
    }
/******************************************************************************* */
 //封装一个判断事件函数
 function fn(batn) {
     batn.onblur = function() {
         // 获取当前最后一个td
         var tip = this.parentElement.nextElementSibling
         tip.style.color = 'red'
         tip.style.fontSize = '12px'
             // 判断失焦后输入框的内容是不是空的
         if (this.value == '') {
             tip.innerText = '内容不能为空'
                 // 当用户名为空的时候 下面就不走了 
             return false
         }
         //由数字和字母组成
         var reg = /[^\d]/g
         if (reg.test(this.value)) {
             tip.innerText = '只能输入数字'
             this.value = ''
             return false
         }
         // 如果条件都不执行的情况下就表示你的条件是满足的
         tip.innerText = ''
     }
 }
 /******************************************************************************* */
//正则判断事件
 username.onblur = function() {
     // 获取当前最后一个td
     var tip = this.parentElement.nextElementSibling
     tip.style.color = 'red'
     tip.style.fontSize = '12px'
         // 判断失焦后输入框的内容是不是空的
     if (this.value == '') {
         tip.innerText = '用户名不能为空'
             // 当用户名为空的时候 下面就不走了 
         return false
     }
     // 如果条件都不执行的情况下就表示你的条件是满足的
     tip.innerText = ''
 }
 fn(repassword)
 fn(tel)
 fn(email)

/******************************************************************* */
he($('.a1'),'优选水果')
he($('.a2'),'卤味熟食')
he($('.a3'),'饮料酒水')
he($('.a4'),'休闲零食')

$('.fa').click(function(){
        var dat = JSON.parse(localStorage.getItem('dat'));
        let dataArr = dat.filter(v=>{
        return (v.ge==='优选水果')
      })
      dataArr=dataArr.splice(0,2)
        dat.filter(v=>{
        return (v.ge==='卤味熟食')
      }).forEach(item => {
        dataArr.push(item)
      })
      dataArr=dataArr.splice(0,4)
      dat.filter(v=>{
        return (v.ge==='饮料酒水')
      }).forEach(item => {
        dataArr.push(item)
      })
      dataArr=dataArr.splice(0,6)
      dat.filter(v=>{
        return (v.ge==='休闲零食')
      }).forEach(item => {
        dataArr.push(item)
      })
      dataArr=dataArr.splice(0,8)
          
    var tr =' '
    dataArr.forEach(item => {
      tr+=` <tr>
     <td class="${item.vall}">${item.name}</td>
     <td>${item.ge}</td>
     <td>￥${item.re}</td>
     <td>${item.te}</td>
     <td>${item.em}</td>
     <td><a href='#'>删除</a></td>
     </tr>
     `
    })
    $('#employeeTable tbody').html(tr);
})
$('a').click(function(){
    var tr= $(this). parent().parent()
    tr.remove()
    var t2=tr.find('td:nth-child(1)').text() 
    var t1=tr.find('td:nth-child(2)').text()
    var dat = JSON.parse(localStorage.getItem('dat'));
    let dataArr = dat.filter(v=>{
        return !(v.ge===t1&&v.name===t2)
      })
    // 写入localStorage
    localStorage.setItem('dat',JSON.stringify(dataArr));
    // console.log(dat)
    return false
})


</script>
<script>

</script>